
(function () {
    let url = location.href
    // console.log(url);
    let urlObj = getQueryString(url)
    fetch('http://chst.vip:1234/api/getcategorybyid?categoryid=' + urlObj.categoryid)
        .then(reason => {
            return reason.json()
        }).then(res => {
            let data = res.result[0]
            console.log(data);
            $('#subNav a').eq(2).html(data.category + '>')
        });

    // 定义初始分类页
    let pageid = 1;

    // 获取总页数
    fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${urlObj.categoryid}&pageid=${pageid}`)
        .then(reason => {
            return reason.json()
        }).then(data => {
            let pages = Math.ceil(data.totalCount / data.pagesize)
            console.log(pages);
            // 渲染 select 列表
            let options = '';
            for (let i = 0; i < pages; i++) {
                options += `
                    <option>${i + 1}/${pages}</option>
                `;
            }
            $('.page').html(options);

            // 判断如果 只有一页 都禁用
            if (pages == 1)  $('.next').prop('disabled', true);

            // 添加点击事件
            $('.next').on("click", function (e) {
                pageid++;
                // 阻止 button 默认刷新页面
                e.preventDefault();



                $('.prev').prop('disabled', false)
                $('.page option').eq(pageid - 1).prop('selected', true).siblings().prop('selected', false)
                console.log(pageid);
                getProduct(pageid)
                if (pageid >= pages) return $('.next').prop('disabled', true);

            });

            $('.prev').on('click', function (e) {
                pageid--;
                // 阻止 button 默认刷新页面
                e.preventDefault();

                $('.next').prop('disabled', false)
                $('.page option').eq(pageid - 1).prop('selected', true).siblings().prop('selected', false)
                console.log(pageid);
                getProduct(pageid);

                // 判断禁用按钮
                if (pageid == 1) return $('.prev').prop('disabled', true);

            });

            // select 添加 change 事件
            $('.page').on('change', function () {
                pageid = this.value.split('/')[0].trim()
                console.log(pageid);
                getProduct(pageid);
                if (pageid >= pages) {
                    $('.prev').prop('disabled', false);
                    return $('.next').prop('disabled', true);
                }
                if (pageid == 1) {
                    $('.next').prop('disabled', false);
                    return $('.prev').prop('disabled', true);
                }
            })

        });


    // 调用函数
    getProduct(pageid)



    // 定义渲染页面函数
    function getProduct(pageid) {
        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${urlObj.categoryid}&pageid=${pageid}`)
            .then(reason => {
                return reason.json()
            }).then(res => {
                let data = res.result
                console.log(data);

                let ele = ''
                data.forEach(item => {
                    ele += `
                    <li>
                        <a href="productlist.html?categoryid=${urlObj.categoryid}&productid=${item.productId}">
                            <div class="img">
                                ${item.productImg}
                            </div>
                            <div class="infoR">
                                <div class="title">
                                    <h4>${item.productName}</h4>
                                </div>
                                <div class="price">${item.productPrice}</div>
                                <div class="other">
                                    <div class="take_price">${item.productQuote}</div>
                                    <i class="iconfont icon-xiaoxi"></i>
                                    <span>${item.productCom}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    `
                });

                $('.info').html(ele);

            });
    };

})();






